<template>
  <div class="goods-hot">
    <h3>{{ title }}</h3>
    <div v-if="goodsList">
      <!-- <carousel v-for="item in goodsList" :key="item.id" :tong="item" /> -->
      <div  v-for="item in goodsList" :key="item.id" class="slider">
        <img :src="item.picture" alt="" />
        <p class="name ellipsis">{{ item.desc }}</p>
        <p class="price">&yen;{{ item.price }}</p>
      </div>
    </div>
  </div>
</template>
<script>
import { gethot } from "@/utils/Api/NavText";
// import carousel from "./carousel.vue";
export default {
  // name: 'GoodsHot',
  props: ["type",'goodsId'],
  // components: { carousel },
  data() {
    return {
      titleObj: { 1: "24小时热销榜", 2: "周热销榜", 3: "总热销榜" },
      goodsList: [],
    };
  },

  methods: {
    async arss(){
      let res = await gethot(this.goodsId,this.type)
      this.goodsList= res.result.map(item=>{
        item.tag=item.desc
        return item
      })
    }
  },



  mounted() {
    this.arss()
  },

  computed: {
    title() {
      return this.titleObj[this.type];
    },
  },
};
</script>
<style scoped lang="scss">
.goods-hot {
  h3 {
    height: 70px;
    background: red;
    color: #fff;
    font-size: 18px;
    line-height: 70px;
    padding-left: 25px;
    margin-bottom: 10px;
    font-weight: normal;
  }
  ::v-deep .goods-item {
    background: #fff;
    width: 100%;
    margin-bottom: 10px;
    img {
      width: 200px;
      height: 200px;
    }
    p {
      margin: 0 10px;
    }
    &:hover {
      transform: none;
      box-shadow: none;
    }
  }
}
.slider {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 40px;
  > a {
    width: 240px;
    text-align: center;
    img {
      padding: 20px;
      width: 230px !important;
      height: 230px !important;
    }
    .name {
      font-size: 16px;
      color: #666;
      padding: 0 40px;
    }
    .price {
      font-size: 16px;
      color: red;
      margin-top: 15px;
    }
  }
}
</style>
